import React, { useEffect, useCallback, useMemo, useState } from 'react'
import { connect } from 'react-redux'
import { getRankingList } from '@/redux/async'
import { Helmet } from 'react-helmet'
import { getPicUrl, formatCount } from 'utils/index'
import TabBar from '@/components/TabBar/TabBar'
import ScrollToTop from '@/components/ScrollToTop/ScrollToTop'
import './index.scss'
function Ranking(props) {
    const { rankingPartitions, rankingVideos, dispatch, match } = props
    const [id, setId] = useState(() => match.params.rId)
    useEffect(() => {
        dispatch(getRankingList(match.params.rId))
    }, [id])
    const Selecttab = useCallback(() => {})
    const tabIndex = useMemo(() => {
        return rankingPartitions.findIndex((e) => e.id === parseInt(id, 10))
    }, [id, rankingPartitions])
    const govideo = useCallback((id) => {
        window.location.href = `/video/av/${id}`
    })
    return (
        <div className="rank">
            <Helmet>
                <title>排行榜</title>
            </Helmet>
            <div className="rank-top">
                <div className="rank-head">
                    <img
                        alt=""
                        onClick={() => {
                            window.history.back()
                        }}
                        className="back"
                        src={require('../../assets/images/back.png')}
                    />
                    <span>排行榜</span>
                </div>
                <TabBar
                    data={rankingPartitions}
                    type={'indicate'}
                    tabindex={tabIndex}
                    Selecttab={Selecttab}
                />
            </div>
            <div className="rank-main">
                {rankingVideos.map((e, i) => (
                    <div
                        key={i}
                        className="flex middle rank-item"
                        onClick={() => {
                            govideo(e.aId)
                        }}
                    >
                        <div className="rank-ico">
                            {i < 3 ? (
                                <img
                                    alt=""
                                    className="rank-topico"
                                    src={require(`../../assets/images/rank${i + 1}.png`)}
                                />
                            ) : (
                                i + 1
                            )}
                        </div>
                        <img src={getPicUrl(e.pic, '@200w_125h')} alt="" className="rank-pic" />
                        <div className="cell-main ml10">
                            <p className="row2 mb5">{e.title}</p>
                            <div className="flex col-hui m middle mb5">
                                <img
                                    src={require('../../assets/images/ico-up.png')}
                                    alt=""
                                    className="rank-av mr5"
                                />
                                <div className="owner">{e.owner.name}</div>
                            </div>
                            <div className="flex col-hui m middle">
                                <div className="cell-main">
                                    <img
                                        src={require('../../assets/images/ico-play.png')}
                                        alt=""
                                        className="rank-av mr5"
                                    />
                                    {formatCount(e.playCount)}
                                </div>
                                <div className="cell-main">
                                    <img
                                        src={require('../../assets/images/ico-danmu.png')}
                                        alt=""
                                        className="rank-av mr5"
                                    />
                                    {formatCount(e.barrageCount)}
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            <ScrollToTop />
        </div>
    )
}

export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(Ranking)
